/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
function createMap(selectorId) {
    google.maps.event.addDomListener(window, 'load', function() {
        initializeGoogleMapById(selectorId);
    });
}

/**
 * Inicializa un mapa en el componente cuyo id esta dado por gmId. Los parametros
 * del mapa a crear deben estar a manera de tags en el componente gmId.
 * Los tags necesarios son info, lat, lang, title.
 * @param {type} gmId
 * @returns {undefined}
 */
function initializeGoogleMapById(gmId) {

    var gmInfo = $('#' + gmId).attr('info');
    var gmLat = $('#' + gmId).attr('lat');
    var gmLang = $('#' + gmId).attr('lang');
    var gmTitle = $('#' + gmId).attr('title');
    var myLatlng = new google.maps.LatLng(gmLat, gmLang);
    var mapOptions = {
        zoom: 17,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Crea el mapa
    var map = new google.maps.Map(document.getElementById(gmId), mapOptions);
    // Ventana informativa
    var contentString = '<div class="map-event-info-window"><h4>' + gmTitle + '</h4>';
    contentString = contentString + '<p>' + gmInfo + '</p></div>';
    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: '400'
    });
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: gmTitle
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });
    var resizeMap = function() {
        google.maps.event.trigger(map, 'resize');
        map.setZoom(map.getZoom());
        map.setCenter(myLatlng);
        infowindow.open(map, marker);
    };
    $(window).resize(resizeMap);
    google.maps.event.addDomListener(window, 'resize', resizeMap);
}


